<template>
  <div class="winningHistoryRecord">
    <!-- 标题 -->
    <div
      class="title"
      :class="{
        'title-fri': lotteryStore.isFri,
      }"
    >
      <div class="title-content items-center">
        <img
          v-if="!lotteryStore.isFri"
          class="title-content-left"
          src="/image/lottery-v3/title-icon.svg"
        />
        <img
          v-else
          class="title-content-left"
          src="/image/lottery-v3/titlefri-icon.svg"
        />
        <div
          class="title-content-text"
          :class="{
            'title-content-text-fri': lotteryStore.isFri,
          }"
        >
          {{ $t("lotteryMoney.lszjyh") }}
        </div>
        <img
          v-if="!lotteryStore.isFri"
          class="title-content-right"
          src="/image/lottery-v3/title-icon.svg"
        />
        <img
          v-else
          class="title-content-right"
          src="/image/lottery-v3/titlefri-icon.svg"
        />
      </div>
    </div>
    <!-- 历史中奖记录 -->
    <div class="record">
      <!-- 表头 -->
      <div class="header items-center">
        <div class="header-text header-text-first">
          {{ $t("lotteryMoney.user") }}
        </div>
        <div class="items-center">
          <div class="header-text header-text-second">
            {{ $t("lotteryMoney.ydj") }}
          </div>
          <div class="header-text header-text-third">
            {{ $t("lotteryMoney.edj") }}
          </div>
        </div>
        <div class="header-text header-text-forth">
          {{ $t("lotteryMoney.jjText") }}
        </div>
      </div>
      <!-- 列表 -->
      <template v-if="slides.length > 0">
        <div
          v-for="(item, index) in slides"
          :key="item.sid"
          class="item-bg-flex"
        >
          <div class="item items-center">
            <div v-if="index > 2" class="item-rank item-rank-text">
              {{ index }}
            </div>
            <img
              v-else-if="index == 0"
              class="item-rank item-rank-img"
              src="/image/lottery-v3/pm1-icon.svg"
            />
            <img
              v-else-if="index == 1"
              class="item-rank item-rank-img"
              src="/image/lottery-v3/pm2-icon.svg"
            />
            <img
              v-else-if="index == 2"
              class="item-rank item-rank-img"
              src="/image/lottery-v3/pm3-icon.svg"
            />
            <!-- 头像昵称 -->
            <div class="items-center header-text-first">
              <!-- 头像 -->
              <div class="item-avatar items-center">
                <img
                  v-if="index == 0"
                  class="item-avatar-bg"
                  src="/image/lottery-v3/pm1-bg-icon.svg"
                />
                <img
                  v-else-if="index == 1"
                  class="item-avatar-bg"
                  src="/image/lottery-v3/pm2-bg-icon.svg"
                />
                <img
                  v-else-if="index == 2"
                  class="item-avatar-bg"
                  src="/image/lottery-v3/pm3-bg-icon.svg"
                />
                <ImgNuxt
                  class="item-avatar-img"
                  isHttp
                  :placeholder="file.avatarDefault"
                  :src="item.avatar || file.avatarDefault"
                />
              </div>
              <div v-if="item.nickname" class="item-nickname">
                {{
                  item.nickname.length > 6
                    ? `${item.nickname.substring(
                        0,
                        3
                      )}..${item.nickname.substring(
                        item.nickname.length - 3,
                        item.nickname.length
                      )}`
                    : item.nickname
                }}
              </div>
              <div v-else class="item-nickname">--</div>
            </div>
            <div class="items-center">
              <!-- 一等奖注数 -->
              <div class="item-bet item-bet-ydj">
                {{ toThousands(item.jackpotFirstLevelPrizeCount) }}
                {{ $t("lotteryMoney.xxz") }}
              </div>
              <!-- 二等奖注数 -->
              <div class="item-bet item-bet-edj">
                {{ toThousands(item.jackpotSecondLevelPrizeCount) }}
                {{ $t("lotteryMoney.xxz") }}
              </div>
            </div>
            <!-- 金额 -->
            <div
              class="item-prize header-text-forth"
              :class="{ 'item-prize-fri': lotteryStore.isFri }"
            >
              ${{ toThousands(decimalToLength(item.jackpotDollarPrizeAmount)) }}
            </div>
          </div>
        </div>
      </template>
      <!-- 空数据 -->
      <div v-else class="notdata items-center">
        <img
          v-if="!lotteryStore.isFri"
          class="notdata-img"
          src="/image/lotterymoney/zwsj-icon.svg"
        />
        <img
          v-else
          class="notdata-img"
          src="/image/lottery-v3/zwsj1-icon.svg"
        />
        <div class="notdata-text">
          {{ $t("lotteryMoney.zwsj") }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="winningHistoryRecord">
import { topUserPrizeRecord } from "@/api/lottery";
import { useLotteryV3Store } from "~~/store/modules/lottery-v3";

const lotteryStore = useLotteryV3Store();
// 资源
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

// 列表数据
const slides: any = ref([]);

/**
 * @description: 获取中奖记录
 */

const topUserPrizeRecordRequset = () => {
  topUserPrizeRecord({ limit: 10 }).then((res) => {
    if (res) {
      if (res.topUserPrizeList && res.topUserPrizeList.length > 0) {
        slides.value = res.topUserPrizeList;
      }
    }
  });
};

onMounted(() => {
  // function generateRandomString(length: number) {
  //   return [...Array(length)]
  //     .map(() => {
  //       const randomCharCode = Math.floor(Math.random() * 62);
  //       if (randomCharCode < 26) {
  //         return String.fromCharCode(randomCharCode + 65); // A-Z
  //       } else if (randomCharCode < 52) {
  //         return String.fromCharCode(randomCharCode - 26 + 97); // a-z
  //       } else {
  //         return String.fromCharCode(randomCharCode - 52 + 48); // 0-9
  //       }
  //     })
  //     .join("");
  // }

  // slides.value = Array.from({ length: 10 }, (_, index) => {
  //   const num = generateRandomString(5);
  //   return {
  //     id: index + 1,
  //     nickname: generateRandomString(12),
  //     winNum: num,
  //     xzNum: `${num.slice(0, 3)}08`,
  //     type: (index % 2) + 1,
  //   };
  // });

  topUserPrizeRecordRequset();
  // 获取数据源
  // if (lotteryStore.activityCurStatus == 2) getRecentRecordRequest();
});
onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
.winningHistoryRecord {
  position: relative;
  background-color: #fff;
  margin: 5 * 2px 15 * 2px 10 * 2px 15 * 2px;
  padding: 20 * 2px 10 * 2px 10 * 2px 10 * 2px;
  border-radius: 12 * 2px;
}
.title {
  position: relative;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(0, 123, 255, 0) 0%,
    rgba(0, 123, 255, 1) 50%,
    rgba(0, 123, 255, 0) 100%
  );
  &-fri {
    background: linear-gradient(
      90deg,
      rgba(255, 155, 1, 0) 0%,
      rgba(255, 155, 1, 1) 50%,
      rgba(255, 155, 1, 0) 100%
    );
  }

  &-content {
    position: absolute;
    top: -11 * 2px;
    left: 50%;
    transform: translateX(-50%);

    &-left {
      position: relative;
      right: -0.8px;
      height: 22 * 2px;
    }
    &-text {
      color: #fff;
      font-size: 13 * 2px;
      font-weight: 590;
      background-color: #007bff;
      padding: 0 * 2px 8 * 2px;
      height: 22 * 2px;
      line-height: 22 * 2px;
      white-space: nowrap;
      &-fri {
        background: #ff9b01;
      }
    }
    &-right {
      position: relative;
      left: -0.8px;
      transform: rotateY(180deg);
      height: 22 * 2px;
    }
  }
}
.record {
  margin-top: 20 * 2px;
}
.notdata {
  min-height: 112 * 2px;
  flex-direction: column;
  justify-content: center;
  &-text {
    text-align: center;
    font-size: 14 * 2px;
    color: #999da7;
  }
  &-img {
    margin-bottom: 8 * 2px;
    width: 50 * 2px;
  }
}

.header {
  padding: 6 * 2px 10 * 2px;
  background-color: #f0f3fa;
  justify-content: space-between;
  border-top-left-radius: 4 * 2px;
  border-top-right-radius: 4 * 2px;
  &-text {
    color: #999da7;
    font-size: 11 * 2px;
    font-weight: 400;
    &-first {
      position: relative;
      width: 80 * 2px;
    }
    &-second {
      width: 80 * 2px;
      margin-right: 10 * 2px;
      white-space: nowrap;
      text-align: right;
    }
    &-third {
      width: 75 * 2px;
      margin-right: 10 * 2px;
      white-space: nowrap;
      text-align: right;
    }
    &-forth {
      white-space: nowrap;
      text-align: right;
      min-width: 50 * 2px;
      flex: 1;
    }
  }
}
.item {
  position: relative;
  justify-content: space-between;
  width: 100%;
  padding: 0 10 * 2px;

  &-bg {
    &-flex {
      display: flex !important;
      align-items: center;
      padding: 2.5 * 2px 0;
    }
  }
  &-rank {
    margin-right: 10 * 2px;
    min-width: 18 * 2px;
    &-img {
      min-width: 18 * 2px;
      height: 20 * 2px;
      line-height: 20 * 2px;
    }
    &-text {
      height: 28 * 2px;
      line-height: 28 * 2px;
      text-align: center;
      color: #999da7;
      font-size: 12 * 2px;
      font-weight: 400;
    }
  }
  &-avatar {
    position: relative;
    min-width: 22 * 2px;
    min-height: 28 * 2px;
    margin-right: 4 * 2px;

    &-bg {
      position: absolute;
      min-width: 22 * 2px;
      min-height: 28 * 2px;
      top: -3.5 * 2px;
      left: -2 * 2px;
    }

    &-img {
      position: relative;

      width: 18 * 2px;
      height: 18 * 2px;
      border-radius: 100px;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
  &-nickname {
    width: 60 * 2px;
    color: #141924;
    font-size: 12 * 2px;
    font-weight: 400;
  }

  &-bet {
    text-align: right;
    color: #141924;
    font-size: 12 * 2px;
    font-weight: 400;

    &-ydj {
      min-width: 55 * 2px;
      margin-right: 10 * 2px;
      white-space: nowrap;
      text-align: right;
    }
    &-edj {
      width: 83 * 2px;
      margin-right: 10 * 2px;
      white-space: nowrap;
      text-align: right;
    }
  }

  &-prize {
    // width: 84 * 2px;
    text-align: right;
    color: #007bff;
    font-size: 12 * 2px;
    font-weight: 510;
    &-fri {
      color: #ff9b01;
    }
  }
}
</style>
